import React from 'react'
import { Button, Input, Form,Toast } from 'react-vant'
import {useNavigate} from "react-router-dom"
import axios from 'axios'
import * as action from "../../src/action"
import {useDispatch,useSelector} from "react-redux"
export default () => {
  const dispatch = useDispatch()
  const navgitate = useNavigate()

  const [form] = Form.useForm()

  const onFinish = values => {
    console.log(values)
    axios.get("/api/login",{
        params:values
    }).then(res=>{
        if (res.data.code ==1) {
            dispatch(action.logininfo({
                name:res.data.name,
                job:res.data.job,
                img:res.data.img
            }))
            Toast.success("登陆成功")
            navgitate("/show",{
                state:{
                    name:res.data.name,
                    job:res.data.job
                }
            })
        } else {
            Toast.error("登陆失败")
        }
    })
  }

  return (
    <Form
      form={form}
      onFinish={onFinish}
      footer={
        <div style={{ margin: '16px 16px 0' }}>
          <Button round nativeType='submit' type='primary' block>
            提交
          </Button>
        </div>
      }
    >
      <Form.Item
        tooltip={{
          message:
            'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.',
        }}
        intro='确保这是唯一的用户名'
        rules={[{ required: true, message: '请填写用户名' }]}
        name='username'
        label='用户名'
      >
        <Input placeholder='请输入用户名' />
      </Form.Item>
      <Form.Item
        rules={[{ required: true, message: '请填写密码' }]}
        name='password'
        label='密码'
      >
        <Input placeholder='请输入密码' />
      </Form.Item>
    </Form>
  )
}
